<template>
	<view class="container assistant-tipslist-container">
		<!-- <searchVue placeholder="搜索医馆、科室、诊断结果"/> -->
		<view class="page-main">
			<view class="page-list" v-for="item in pageList" :key="item.id">
				<view class="list-top">
					<image class="list-img" :src="$fileUrl+'tips.png'" mode="aspectFill"></image>
					<text class="list-title">复诊提醒</text>
					<text class="list-status c-primary" v-if="item.status===0">待提醒</text>
					<text class="list-status c-success" v-else-if="item.status===1">已提醒</text>
				</view>
				<view class="list-main">
					<view class="info-list">
						<text class="info-title">提醒时间：</text>
						<text class="info-words">{{item.remindTime}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">提醒事件：</text>
						<text class="info-words">{{item.remindIncident}}</text>
					</view>
				</view>
				<view class="list-bottom">
					<view class="yuan-btn btn-default" v-if="item.status===0" @click="clickCancel(item)">取消提醒</view>
				</view>

			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="yuan-btn btn-primary" @click="clickUp">新增提醒</view>
		</view>

		<view class="updata-panel" :class="showUpdata&&'update-panel-show'">
			<view class="updata-main yuan-form">
				<view class="updata-title">新增提醒</view>
				<view class="list-input">
					<text class="form-title">提醒时间：</text>
					<uni-datetime-picker type="datetime" :value="formData.remindTime"
						:start="$format(new Date(),'yyyy-MM-dd hh:mm:ss')" @change="bindDateChange">
						<view class="yuan-picker-row form-input">
							<view class="yuan-input " v-if="formData.remindTime">
								{{$format(formData.remindTime,'yyyy-MM-dd hh:mm:ss') }}
							</view>
							<view class="placeholder-style" v-else>请选择日期</view>
							<text class="iconfont">&#xe775;</text>
						</view>

					</uni-datetime-picker>
				</view>
				<view class="list-input">
					<text class="form-title">提醒事件：</text>
					<input class="form-input" style="text-align: right;" v-model="formData.remindIncident" type="text">
				</view>

				<view class="btn-box">
					<view class="yuan-btn btn-primary" @click="clickSave">保存</view>
					<view class="yuan-btn btn-default" @click="clickClose">取消</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { hideLoading, showLoading, showToast } from '../../common/util';
	import userApi from '../../common/userApi';

	const showUpdata = ref(false)
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	onMounted(() => {
		getPageList()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize }
			const res = await userApi.findVisitRemindList()
			const projects = res.data || {}
			pageList.value = pageList.value.concat(projects)

		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const formData = ref<any>({})
	const clickUp = () => {
		formData.value = {}
		showUpdata.value = true
	}
	const clickSave = async () => {
		showLoading()

		try {
			await userApi.addVisitRemind({ ...formData.value })
			showToast('添加成功', {}, () => {
				showUpdata.value = false
				refreshList()
			})

		} finally {
			hideLoading()
		}


	}
	const clickClose = () => {
		showUpdata.value = false
	}
	const clickCancel = (item) => {
		uni.showModal({
			title: '温馨提示',
			content: '你确定要取消该提醒吗？',
			success:async (res) => {
				if (res.confirm) {
					showLoading()

					try {
						await userApi.cancelVisitRemind(item.id)
						showToast('取消成功', {}, () => {
							refreshList()
						})

					} finally {
						hideLoading()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const bindDateChange = (e : any) => {
		formData.value.remindTime = e
	}
</script>

<style lang="scss">
	.assistant-tipslist-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 120rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(100, 100, 100, 0.1);
			padding: 20rpx;
		}

		.list-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: solid 1px rgba(232, 232, 232, 1);
		}

		.list-img {
			width: 40rpx;
			height: 40rpx;
			display: block;
		}

		.list-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
			flex-grow: 1;
			margin-left: 12rpx;
		}

		.list-status {
			font-size: 24rpx;
		}

		.list-main {
			padding: 20rpx 0;
		}

		.info-list {
			margin: 10rpx 0;
		}

		.info-title {
			font-size: 28rpx;
			color: #6D6D6D;
		}

		.info-words {
			font-size: 28rpx;
			color: #222222;
		}

		.list-bottom {
			border-top: solid 1px rgba(232, 232, 232, 1);
			padding-top: 20rpx;
			text-align: right;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}
		}

		.page-bottom {
			position: fixed;
			width: 100%;
			height: 170rpx;
			padding: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			bottom: 0;
			left: 0;
			z-index: 10;

			.yuan-btn {
				height: 80rpx;
				border-radius: 80rpx;
				width: 100%;
			}
		}

		.updata-panel {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 11;
			background-color: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			transform: translateX(-100%);

			.updata-title {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				padding-bottom: 30rpx;
			}

			.updata-main {
				background-color: #fff;
				border-radius: 10rpx;
				width: 90%;
				margin: 0 auto;
				padding: 30rpx;
				transform: scale3d(0, 0, 0);
				transition: all 0.3s;
			}

			.list-input {
				display: flex;
				margin-bottom: 10rpx;
				align-items: center;
			}

			.form-input {
				background: #F4F4F4;
				flex-grow: 1;
				height: 68rpx;
				border-radius: 6rpx;
				padding: 0 10rpx;
				font-size: 30rpx;
			}

			.form-title {
				font-size: 28rpx;
				color: #6D6D6D;
				flex-shrink: 0;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 50rpx 0;
			}

			.yuan-btn {
				width: 200rpx;
				height: 80rpx;
			}

		}

		.update-panel-show {
			transform: translateX(0);

			.updata-main {
				transform: scale3d(1, 1, 1)
			}
		}

		.uni-calendar--ani-show {
			transform: translateY(100rpx)
		}
	}
</style>